<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <view class="item" v-for="(item,index) in dataList" :key="index">
      <uni-group mode="card" class="mycard">
        <view class="mycard-item"> 门票类型：<span style="color:red">{{ item.ticketType }}</span> <span style="float:right">门票时间：<span style="color:red">{{ item.ticketDate }}</span></span> </view>
        <view class="mycard-item"> 预订数量：<span style="color:red">{{ item.num }}</span> <span style="float:right">门票单价：<span style="color:red">{{ item.ticketPrice }}</span></span> </view>
        <view class="mycard-item"> 总价：<span style="color:red">{{ item.num * item.ticketPrice }}</span> <span style="float:right">预订时间：<span style="color:red">{{ item.createTime }}</span></span> </view>
      </uni-group>
    </view>
  </z-paging>
</template>

<script>
import { listOrder } from '@/api/system/order.js';
import config from '@/config';

export default {
  data() {
    return {
      dataList: [], // 初始相册列表
    };
  },
  mounted() {

  },
  methods: {
    queryList(pageNo, pageSize) {
      let queryParams = {
        pageNum: pageNo,
        pageSize: pageSize
      }
      // 此处请求仅为演示，请替换为自己项目中的请求
      listOrder(queryParams).then(res => {
        // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
        this.$refs.paging.complete(res.rows);
      })
    },
    formatUrl(url) {
      return [config.baseUrl + url]
    },
  },
};
</script>


<style scoped>
.u-demo-block{
  margin: 20px;
}

.album-container {
  height: 100%; /* 根据需要调整高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.u-page {
  padding: 20rpx;
}

.album {
  padding: 40rpx;
  background-color: ghostwhite;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.album__avatar {
  margin-right: 20rpx;
}

.album__content {
  flex: 1;
}

.loading-more,
.no-more {
  text-align: center;
  padding: 20rpx;
  color: #999;
}
</style>
